<template>
	<view>
		<view class="topSe">
			<view class="inputInfo">
				<view class="inputIcon">
					<u-icon name="search" color="#979797" size="32"></u-icon>
				</view>
				<view class="inputHtml">
					<input type="text" @input="getData" v-model="inputGoodsNameValue" value="" placeholder="请输入您所查询的名称" />
				</view>
			</view>
		</view>
		<view class="goodsList">
			<view class="goods" style="" v-for="(item,index) in goodsListInfo" @click="getItemInfo(item)">
				<view class="goodsImage">
					<image :src="bindUrls(item.image)" mode=""></image> 
				</view>
				<view class="goodsTitle">
					{{item.cai_name}}({{item.basic_amount}})
				</view>
			</view>
		</view>
		
		<!-- 弹框基础定价开始 -->
		<u-popup v-model="settingPriceShow" mode="top" class="settingPriceShow" border-radius="20" height="635rpx" width="80%" z-index="99">
			<view style="overflow: hidden;">
				<view class="view0">
					<view class="view1">
						基础定价
					</view>
					<view class="xxx" @click="closeInfo">
						<u-icon name="close" color="#DCDCDC" size="28"></u-icon>
					</view>
				</view>
				<view class="view" style="border-bottom: #f7f7f7 solid 1rpx;">
					<view class="xing">*</view>
					<view class="txt">客户名称：</view>
					<view class="rightTxt" style="color: #333333;line-height: 96rpx;">
						{{userName}}
					</view>
				</view>
				<view class="view" style="border-bottom: #f7f7f7 solid 1rpx;">
					<view class="xing">*</view>
					<view class="txt">商品名称：</view>
					<view class="rightTxt" style="color: #EA1616;line-height: 96rpx;">
						{{goodsName}}
					</view>
				</view>
				<view class="view" style="width: 100%;">
					<view class="xing">*</view>
					<view class="txt">原始价格:</view>
					<view class="rightTxt">
						<input type="text" v-model="goodsPrice" placeholder="请输入" /> 
					</view>
					<view class="rmbTxt" style="color: #333333;">
						元
					</view>
				</view>
				<view class="submit" @click="subInfo">
					保存
				</view>
			</view>
		</u-popup>
		<!-- 弹框基础定价结束 -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				inputGoodsNameValue:"",//筛选框内的值
				userName:"",//弹框里面的客户名字
				settingPriceShow:false,//弹框显示
				goodsListInfo:[],//不可见商品数据
				goodsId:"",//临时商品id
				goodsName:"",//临时商品名字
				goodsPrice:"",//临时商品价格
				
			}
		},
		onLoad() {
			this.getData();
			//alert("=="+JSON.stringify());
			this.userName=uni.getStorageSync('userinfo').realname;
		},
		methods: {
			subInfo(){//弹框里面的保存
				var _this=this;
				var data={
					"cai_id":this.goodsId,//商品id
					"basic_amount":_this.goodsPrice // 商品价格
				}
				_this.$u.api.supplierCaidingjia(data).then(res => {
					//_this.goodsListInfo=res;
					_this.$u.toast("成功！");
					_this.getData();//添加后刷新
					_this.settingPriceShow=false;
				});
				//alert("提交参数=="+JSON.stringify(data));
			},
			getItemInfo(item){//点击商品获取商品详情》》》弹框显示
				var _this=this;
				_this.goodsPrice=item.basic_amount;//价格初始化
				_this.settingPriceShow=true;//打开弹框
				_this.goodsId=item.id;//设置id
				_this.goodsName=item.cai_name;//设置菜名字			
			},
			closeInfo(){
				this.settingPriceShow=false;
			},
			getData(){//进入页面获取不可见商品
				var _this=this;
				var data={
					"keyword":_this.inputGoodsNameValue
				}
				this.$u.api.supplierOwnCaiList(data).then(res => {
					_this.goodsListInfo=res.data;
					//alert(JSON.stringify(res));
				});
			},
			bindUrls(url){// 商品图片单独处理
				var path=this.serviceUrl+url;
				//var path="https://hr.gukecloud.com/"+url;
				//alert("path==="+path)
				return path;
			}
		}
	}
</script>

<style lang="scss" scoped>
.settingPriceShow{border-radius: 30rpx;
	margin-top: 306rpx;margin-left: 40rpx;margin-right: 40rpx;
	.submit{color: #FFF;font-size: 32rpx;text-align: center;line-height: 70rpx;margin-top: 65rpx;
		height: 70rpx;margin-left: 122rpx;margin-right: 122rpx;background: #1B85E6;border-radius: 35rpx;
	}
	.view0{display: flex;height: 128rpx;border-bottom: #f7f7f7 solid 1rpx;
		.view1{line-height: 128rpx;text-align: center;margin-left: 30rpx;margin-right: 30rpx;
			color: #333333;font-size: 32rpx;
			flex: 1;
		}
		.xxx{//关闭按钮
			margin-top: 50rpx;margin-right: 30rpx;position: absolute;right: 0;
		}
	}
	.view{
		height: 100rpx;background: #FFF;display: flex;padding-left: 40rpx;padding-right: 40rpx;
		.rmbTxt{
			width: 40rpx;line-height: 96rpx;color: #EA1616;font-size: 26rpx;margin-left: 10rpx;
		}
		.xing{
			width: 10px;line-height: 112rpx;font-size: 32rpx;color: #E89C38;margin-right: 10rpx;
		}
		.txt{height: 100rpx;
			line-height: 100rpx;
		}
		.rightTxt{//background: green;
			flex: 1;display: flex;font-size: 26rpx;  justify-content: flex-end; color: #999999;
			.rightInfo{
				line-height: 100rpx;font-weight: 300;
			}
			input{height: 98rpx;
				font-size: 26rpx;text-align: right;font-weight: 300;
			}
			.rightInfoType{margin-top: 25rpx;color: #333333;font-size: 26rpx;border-radius: 2px;
				line-height: 48rpx;font-weight: 300;background: #F6F6F6;height: 48rpx;
				padding-left: 20rpx;padding-right: 20rpx;
			}
		}
	}
}
	.goodsList {
		display: flex;flex-wrap: wrap;
		.goods {//750-40-40-18  750-98  652/1  325
			width: 326rpx;border-radius: 10px;background: #FFF;min-width: 326rpx;
				margin-left: 20rpx;height: 318rpx;margin-top: 30rpx;
			.goodsImage{margin-left: 23rpx;margin-top: 30rpx;height: 210rpx;width: 280rpx;
				box-shadow: 0rpx -1rpx 5rpx 0rpx rgba(223, 229, 235, 0.41), 4rpx 6rpx 5rpx 0rpx rgba(223, 229, 235, 0.41);
				border-radius: 10px;
				image{
					height: 210rpx;width: 280rpx;border-radius: 10px;
				}
			}
			.goodsTitle{
				text-align: center;margin-top: 18rpx;color: #646464;font-size: 22rpx;
			}
		}
	}

	page {
		background-color: #F7F7F7;
		max-width: 750rpx;margin:auto;
	}

	.topSe {
		//background: yellow;
		//background: #FFF;
		height: 100rpx;
		overflow: hidden;
		width: 100%;

		.inputInfo {
			margin-top: 30rpx;
			border-radius: 30px;
			margin-left: 40rpx;
			margin-right: 40rpx;
			height: 70rpx;
			background: #fff;
			display: flex;

			.inputIcon {
				width: 50rpx;margin-left: 193rpx;
				height: 100%; //background: red;

				.u-icon {
					margin-top: 20rpx;
					margin-left: 20rpx;
				}
			}

			.inputHtml {
				flex: 1;

				input {
					//background: green;
					padding-left: 14rpx;
					line-height: 70rpx;
					height: 70rpx;
					width: 100%;
					color: #B9B9B9;
					font-size: 24rpx;
				}

			}
		}

	}
</style>
